<template>
  <div class="menu-list">
    <div class="title">{{ data.title }}</div>
    <div class="options-btn">
      <button @click="$emit('addMaterial', index)">+添加用料</button>
      <button @click="$emit('del', index)">删除清单</button>
    </div>

    <ul class="menu-list-content">
      <li v-for="(d, i) in data.noList" :key="i">
        <div class="status" @click="$emit('setStatus', 'no', index, i)"></div>
        <div class="info">
          <span>{{ d.name }}</span>
          <span>{{ d.number }}</span>
        </div>
      </li>
    </ul>

    <p 
        class="downList"
        :class="{'down': isDown}"
        v-if="data.yesList.length"
        @click="down"
    >
      已完成 {{ data.yesList.length }}
    </p>

    <ul class="menu-list-content yes" :class="{'down': isDown}" :style="{ 'height': height }">
      <li v-for="(d, i) in data.yesList" :key="i">
        <div
          class="status active"
          @click="$emit('setStatus', 'yes', index, i)"
        ></div>
        <div class="info">
          <span>{{ d.name }}</span>
          <span>{{ d.number }}</span>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  props: ["data", "index"],
  data() {
      return {
          isDown: true
      }
  },
  computed: {
      height() {
          console.log(this.data.yesList.length)
          if (this.data.yesList.length === 0) return;
          return this.isDown ? this.data.yesList.length * 70 - 10  + 'px' : '';
      }
  },
  methods: {
      down() {
          this.isDown = !this.isDown;
          this.$emit('down');
      }
  },
};
</script>

<style lang="sass">
.menu-list
    text-align: left
    .downList
        color: red
        padding-left: 24px
        line-height: 40px
        position: relative
        &::before
            content: ">"
            position: absolute
            left: 10px
            transition: .3s
        &.down::before
            transform: rotate(90deg)
    .title
        font-size: 30px
        line-height: 40px
    .options-btn
        margin: 10px 0
        button
            border: 1px solid orange
            padding: 3px 5px
            border-radius: 5px
            color: orange
            outline: 0
            background: white
            &:last-child
                margin-left: 10px
    .menu-list-content.yes
        height: 0px
        overflow: hidden
        transition: .3s
    .menu-list-content.yes.down
        // height: 200px
        // overflow: visible
    .menu-list-content
        li
            height: 60px
            background: #eee
            display: flex
            align-items: center
            padding-left: 20px
            border-radius: 10px
            & + li
                margin-top: 10px
            .status
                border: 1px solid #ddd
                width: 30px
                height: 30px
                border-radius: 50%
                margin-right: 20px
                position: relative
                &::before
                    content: ""
                    display: block
                    width: 16px
                    height: 6px
                    position: absolute
                    top: 30%
                    left: 6px
                    transform: rotate(-45deg)
                    border:
                        left: 1px solid transparent
                        bottom: 1px solid transparent
                &.active
                    border-color: orange
                &.active::before
                    border-color: orange

            .info
                flex: 1
                display: flex
                span
                    flex: 1
</style>